<template>
 <!-- 维系看板 -->
  <div class="board-content">
    <board-title title="维系" bgclass="bg-wx">
      <img slot="flagImg" class="flag-img" src="~@/assets/imgs/publicline/board/flag_wx.png" />
    </board-title>
    <day-sustain ref="daySustainRef" v-show="flag" />
    <month-sustain ref="monthSustainRef" v-show="!flag" />
  </div>
</template>

<script>
import boardTitle from '@/views/components/publicline/board/title.vue'
import daySustain from '@/views/components/publicline/board/daySustain.vue'
import monthSustain from '@/views/components/publicline/board/monthSustain.vue'

export default {
  components: { boardTitle, daySustain, monthSustain },
  props: {
    flag: {
      type: Boolean,
      require: false,
      default: true
    }
  },
  methods: {
    getMorningSustain(params) {
      if(this.flag) {
        this.$refs.daySustainRef.getMorningDaySustain(params)
      }
      if(!this.flag) {
        this.$refs.monthSustainRef.getMorningMonthSustain(params)
      }
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .board-wx-info {
  background: #fff;
  .board-wx-item {
    padding: 16px 12px 8px 12px;
    border-bottom: 1px solid #F3F7FA;
    margin-left: 6px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:last-child {
      border-bottom: none;
    }
    &.bg1 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-5gqz.png');
    }
    &.bg2 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-5gsjb.png');
    }
    &.bg3 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-kdtsb.png');
    }
    &.bg4 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-kdxy.png');
    }
    &.bg5 {
      background-image: url('~@/assets/imgs/publicline/board/bg-card-wx-tcst.png');
    }
    .item-wx-detail {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .title {
      font-size: 11px;
      color: #999;
    }
    .item-wx-info {
      .value {
        font-size: 20px;
        color: #41C2BF;
        padding-left: 10px;
      }
      .unit {
        font-size: 14px;
      }
    }
    .item-wx-percent {
      .value {
        padding-left: 2px;
        &.up {
          color: #FF6024;
        }
        &.down {
          color: #40BB3F;
        }
      }
      img {
        width: 11px;
      }
    }
  }
}
</style>
